<template>
  <div class="main">
    <vHeader :title="matchLoading?'交易匹配中':matchResult?'交易匹配成功':'交易匹配失败'" @return="$router.go('-1')" />
    <div class="contents">
      <div  class="matchModel">
        <img class="matchImg" src="../assets/images/matching.png" />
        <div class="time">
          {{matchResult?`正在帮您匹配，${second}s…`:'匹配失败，可点击 [重新匹配] 调整条件后重试'}}
          </div>
        <div class="line">
          <span class="left">购买数量</span>
          <span class="right" v-if="this.$route.params.receivePaymentId">{{$route.params.transCount}} B</span>
        </div>
        <div class="line">
          <span class="left">付款方式</span>
          <span class="right">
            <img v-if="this.$route.params.receivePaymentId" :src="require(`@/assets/images/receivePayment/${$route.params.receivePaymentType}.png`)" />
            <span v-if="this.$route.params.receivePaymentId">{{$route.params.receivePaymentName}}({{$route.params.receivePaymentCard}})</span>
          </span>
        </div>
        <div class="line">
          <span class="left">最高单价</span>
          <span class="right" v-if="this.$route.params.receivePaymentId">{{$route.params.transPrice}}</span>
        </div>
      </div>
      <div class="tip" v-if="first===true">系统会根据单价、设定数量以及卖家信誉等条件进行匹配，寻找最接近设定条件的订单。</div>
      <div class="tip" v-if="first===true">注意：如果系统无法以设定条件完全匹配订单，将自动匹配最接近条件的订单，若始终无法匹配到，将推荐相似条件的订单。</div>

      <div class="btn" v-if="matchResult" @click="popShow=true">取消匹配</div>
      <div class="btn" v-else @click="init">重新匹配</div>
      <div class="recommend" v-if="first===false">
        <div class="title">为你推荐</div>
        <div class="content" v-if="recommendList.length!=0">
          <div v-for="(item,index) in recommendList">
            <div v-if="item.receivePayment.length!=0" class="card" :key="index">
              <div class="info">
                <img class="headImg" :src="baseData&&baseData.data.imgUrl + item.avatar" />
                <span>{{item.nickName}}</span>
                <img class="creditImg" v-if="item.grade" :src="require(`@/assets/images/creditType/${item.grade}.png`)" />
              </div>
              <div class="line1">
                <span class="t1">可售</span>
                <span class="t2">{{item.transTotalCount.toFixed(2)}} B</span>
              </div>
              <div class="line2">
                <span class="t1">单价</span>
                <span class="t2"> ¥ {{item.transPrice.toFixed(2)}}</span>
              </div>
              <div class="line3">
                <img :src="require(`@/assets/images/receivePayment/${item}.png`)" v-for="(item,index) in item.receivePayment" :key="index" />
              </div>
              <div class="right">
                <div class="line1">成交量  {{item.successCount>99?'99+':item.successCount}}&nbsp;&nbsp;|&nbsp;&nbsp;{{parseInt(item.closeRate)}}%</div>
                <div class="btn">购买</div>
              </div>
            </div>
          </div>
        </div>
        <div class="nodata" v-else>
          <img src="../assets/images/nodata.png" />
          <span>数据为空</span>
        </div>
      </div>

      <van-popup class="popup" style="width: 80%;" round closeable v-model="popShow">
        <div class="popModel">
          <div class="title">温馨提示</div>
          <div class="contents">交易正在进行中，您确定要取消吗？</div>
          <div class="buttons">
            <div class="btn1" @click="popShow=false">取消</div>
            <div class="btn2" @click="cancleMatch">确定</div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
  import api from "@/api/trade";
  import { mapState } from "vuex";
  const vHeader = () => import("@/components/layout/header");
  export default {
    data() {
      return {
        first: true,
        popShow: false,
        timer: null,
        apiTimer: null,
        second: 60,
        matchLoading: true,
        matchResult: true,
        recommendList: []
      }
    },
    computed: {
      ...mapState({
        baseData: state => state.global.baseData
      }),
    },
    methods: {
      cancleMatch(){
        this.popShow=false;
        this.clearTimes()
        this.second = 60;
        // 交易匹配失败
        this.matchLoading = false;
        this.matchResult = false;
        this.getRecommend();
      },
      clearTimes(){
        clearInterval(this.timer)
        this.timer = null
        clearInterval(this.apiTimer)
        this.apiTimer = null
      },
      startMatch(){
        this.timer = setInterval(()=>{
          this.matchLoading = true
          this.second --;
          if(this.second === 0){
            this.cancleMatch();
          }
        },1000)
      },
      getRecommend(){
        api.transPayAutoFail({
          receivePaymentId: this.$route.params.receivePaymentId,
          transCount: this.$route.params.transCount,
          transPrice: this.$route.params.transPrice,
          userId: this.$route.params.userId,
        }).then(res => {
          if(res.data.code == 0){
            if(this.first){
              this.first = false;
            }
            res.data.data.forEach(item=>{
              item.receivePayment = new Array;
              item.receivePaymentType.split(',').forEach(xitem=>{
                if(['3','4','5','6','7'].indexOf(xitem)!==-1){
                  item.receivePayment.push(xitem)
                }
              })
            })
            this.recommendList = res.data.data;
            console.log(this.recommendList)
          }
        });
      },
      getMatch(){
        api.transPayAuto({
          receivePaymentId: this.$route.params.receivePaymentId,
          transCount: this.$route.params.transCount,
          transPrice: this.$route.params.transPrice,
          userId: this.$route.params.userId,
        }).then(res => {
          if(res.data.code == 0){
            this.matchLoading = false;
            this.matchResult = true;
            this.clearTimes();
            this.$toast('匹配成功')
            setTimeout(()=>{
              this.$router.push("/chatRoom")
            },1000)
          }
        });
      },
      init(){
        this.matchLoading = true;
        this.matchResult = true;
        if(this.$route.params.receivePaymentId){
          this.getMatch()
          this.apiTimer = setInterval(()=>{
            this.getMatch()
          },10000)
          this.startMatch()
        }else{
          this.$router.go('-1')
        }
      },
      stopMatch(){

      },
    },
    mounted() {
      this.init()
    },
    beforeDestroy() {
      this.clearTimes()
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
  .main{
    height: 100%;
    .contents{
      background: #f0f5fd;
      padding: 15px;
      height: calc(100% - 84px);
      overflow: auto;
    }
  }
  .popModel{
    padding: 15px;
    .title{
      font-size: 17px;
      text-align: center;
      color: #444444;
      line-height: 24px;
    }
    .contents{
      margin: 30px auto 24px auto;
      font-size: 14px;
      text-align: center;
      color: #444444;
      line-height: 20px;
    }
    .buttons{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn1{
        width: calc(50% - 8px);
        line-height: 42px;
        background: #fff;
        border-radius: 4px;
        color: #479fff;
        font-size: 15px;
        border: 1px solid #479fff;
        text-align: center;
      }
      .btn2{
        width: calc(50% - 4px);
        line-height: 44px;
        background: #479fff;
        border-radius: 4px;
        color: #fff;
        font-size: 15px;
        text-align: center;
      }
    }
  }
  .matchModel{
    padding: 15px;
    background: #ffffff;
    border-radius: 8px;
    .matchImg{
      width: 161px;
      height: 145.5px;
      display: block;
      margin: 15px auto;
    }
    .time{
      font-size: 14px;
      text-align: center;
      color: #444444;
      line-height: 20px;
      border-bottom: 0.5px solid #EFF0F3;
      padding-bottom: 20px;
    }
    .line{
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
      margin-top: 20px;
      .left{
        font-size: 14px;
        color: #8f949c;
        line-height: 20px;
      }
      .right{
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #444444;
        line-height: 20px;
        img{
          width: 18px;
          height: 18px;
          margin-right: 5px;
        }
      }
    }
  }
  .tip{
    width: 345px;
    font-size: 12px;
    text-align: left;
    color: #8f949c;
    line-height: 16.5px;
    margin-top: 12px;
  }
  .btn{
    width: 100%;
    line-height: 44px;
    background: #479fff;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
  }
  .recommend{
    background: #ffffff;
    border-radius: 8px;
    margin-top: 12px;
    .title{
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      color: #444444;
      border-bottom: 0.5px solid #EFF0F3;
    }
    .nodata{
      img{
        width: 161px;
        height: 145.5px;
        display: block;
        margin: 0 auto;
      }
      span{
        display: block;
        font-size: 14px;
        text-align: center;
        color: #8F949C;
        line-height: 20px;
        padding-bottom: 20px;
      }
    }
  }
  .content{
    height: calc(100% - 115px);
    overflow-y: auto;
    .card{
      padding: 15px;
      border-bottom: 1px solid #EFF0F3;
      background: #fff;
      position: relative;
      .info{
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        .headImg{
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
        .creditImg{
          width: 38px;
          height: 14px;
        }
        span{
          height: 20px;
          font-size: 14px;
          font-weight: Regular;
          color: #444444;
          line-height: 20px;
          margin: 0 8px;
        }
      }
      .line1{
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        .t1{
          height: 14px;
          font-size: 10px;
          font-weight: Regular;
          color: #8f949c;
          line-height: 14px;
          margin-right: 8px;
        }
        .t2{
          height: 17px;
          font-size: 17px;
          font-weight: Medium;
          color: #444444;
          line-height: 17px;
        }
      }
      .line2{
        height: 14px;
        font-size: 10px;
        font-weight: Regular;
        margin-bottom: 5px;
        .t1{
          color: #8f949c;
          margin-right: 8px;
        }
        .t2{
          color: #444444;
        }
      }
      .line3{
        display: flex;
        align-items: center;
        img{
          width: 14px;
          height: 14px;
          margin-right: 8px;
        }
      }
      .right{
        position: absolute;
        right: 15px;
        top: 18px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .hide{
          opacity: 0;
        }
        .line1{
          height: 14px;
          font-size: 10px;
          font-weight: Regular;
          color: #8f949c;
          line-height: 14px;
          margin-bottom: 8px;
        }
        .line2{
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          .t1{
            height: 17px;
            font-size: 17px;
            font-weight: Medium;
            color: #444444;
            line-height: 17px;
            margin-right: 8px;
          }
          .t2{
            height: 14px;
            font-size: 10px;
            font-weight: Regular;
            color: #8f949c;
            line-height: 14px;
          }
        }
        .flex{
          display: flex;
          align-items: center;
          .redT{
            color: red;
            font-size: 18px;
          }
          .greenT{
            color: limegreen;
            font-size: 18px;
          }
        }
        .btn{
          width: 60px;
          text-align: center;
          color: #fff;
          line-height: 27px;
          height: 27px;
          background: #479fff;
          border-radius: 4px;
          font-size: 13px;
          margin-left: 10px;
        }
        .btn2{
          width: 60px;
          text-align: center;
          color: #479fff;
          border: 1px solid #479fff;
          line-height: 27px;
          height: 27px;
          background: #fff;
          border-radius: 4px;
          font-size: 13px;
          margin-left: 10px;
        }
      }
    }
  }
</style>
